<template>
	<view class="">
		<view class="page">

			<view class="head-bg" :style="{'background-image':'url('+top_bg+')'}">
				<view class="status-bar">

				</view>

				<text class="title">我的</text>

				<view class="member-info" @click="isLogin">
					<u-avatar :src="avatar" size="50"></u-avatar>

					<view class="member-nick">
						<!-- <text>{{nickName}}</text> -->
						<text>{{phone}}</text>
					</view>

					<view class="points" @click="goPointsDetail" v-if="false">
						<u-icon name="gift-fill" size="16"></u-icon>
						<text>积分0</text>
					</view>
				</view>
			</view>

			<view class="bottom-content">
				<view class="my-order card" v-if="true">
					<text>我的订单</text>

					<view class="order">
						<view class="order-item" @click="goTestDriveList">
							<image src="@/static/mine/mine_order0.png"></image>
							<text>试驾订单</text>
						</view>

						<view class="order-item" @click="goCarOrderList">
							<image src="@/static/mine/mine_order1.png"></image>
							<text>车辆订单</text>
						</view>


						<view class="order-item" @click="goActivityOrder">
							<image src="@/static/mine/mine_order2.png"></image>
							<text>活动订单</text>
						</view>

					</view>

				</view>

				<view class="test" @click="goInvite">
					<image :src="invite_bg" class="invite" mode="scaleToFill"></image>
				</view>

				<view class="profit card">

					<view style="flex-grow: 1; display: flex; justify-content: center;" @click="gomyincomedetail">
						<view class="profit-item">
							<text style="font-size: 24upx;color: #131313;">累计收益(元)</text>
							<text
								style="font-size: 30upx;color: #EC4863;margin-top: 12upx;font-weight: bold;">{{drawalInfo.totalIncome || '0.00'}}</text>

							<text class="rect-text">收益明细</text>

						</view>
					</view>

					<u-line dashed="true" direction="col" length="60%"></u-line>

					<view style="flex-grow: 1; display: flex; justify-content: center;" @click="gowithdraw">
						<view class="profit-item">
							<text style="font-size: 24upx;color: #131313;">可提现现金(元)</text>
							<text
								style="font-size: 30upx;color: #131313;margin-top: 12upx;;font-weight: bold;">{{drawalInfo.balance || '0.00'}}</text>
							<text class="circle-text">提现</text>
						</view>

					</view>
				</view>

				<view class="card" style="margin: 20upx 36upx 0;padding: 0 39upx;">
					<mine-item name="我的车辆" :imgSrc="small_car" @itemClick="goMycar"></mine-item>
					<mine-item v-if="showBank" name="银行卡" :imgSrc="small_bank"
						@itemClick="goMyBankCard"></mine-item>
					<mine-item name="优惠券" :imgSrc="small_coupon" @itemClick="goMyCoupon">
					</mine-item>

				</view>

				<view class="card" style="margin: 15upx 36upx 0;padding: 0 39upx;">
					<mine-item name="企业介绍" :imgSrc="small_intro" @itemClick="goIntro"></mine-item>
					<mine-item name="消息通知" :imgSrc="small_msg" @itemClick="goMsg"></mine-item>
					<mine-item name="合作加盟" :imgSrc="small_unit" @itemClick="goJoin"></mine-item>
					<mine-item name="客服中心" :imgSrc="small_service" @itemClick="goService">
					</mine-item>

				</view>

				<text class="logout" @click="logout" v-if="!isNotLogin">退出登录</text>

				<view style="margin: 30upx 0 0;text-align: center;">
					<text style="font-size: 24upx;color: #a7a7a7;">技术支持：深圳市行知网络科技有限公司</text>
				</view>
			</view>



			<u-modal title="提示" content="" :show="showLogout" showCancelButton closeOnClickOverlay @confirm="confirm"
				@cancel="cancel" @close="close">

				<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定退出登录吗？</view>
			</u-modal>

		</view>


		<HomeTabbar :tab="2"></HomeTabbar>
		<!-- 登录弹窗 -->
		<LoginMask></LoginMask>
	</view>
</template>

<script>
	import get from 'lodash/get';
	import HomeTabbar from '@/components/layout/tabbar.vue';
	import mineItem from '@/components/mine/mine-item.vue';
	import LoginMask from '@/components/layout/login-mask.vue';
	import {
		subscribeList,
		memberAccount,
		getDaiKouFlag,
		doMemberLogin
	} from '../../common/api.js';

	import {
		signout
	} from '../../common/apis/login-api.js';

	export default {
		components: {
			mineItem,
			HomeTabbar,
			LoginMask,
		},

		data() {
			return {
				top_bg: this.baseImageUrl + 'uni_rental/00@2x.png',
				invite_bg: this.baseImageUrl + 'uni_rental/推广banner@2x.png',
				small_coupon: this.baseImageUrl + 'uni_rental/个人中心优惠券@2x.png',
				small_activity: this.baseImageUrl + 'uni_rental/订单@2x.png',
				small_msg: this.baseImageUrl + 'uni_rental/消息通知@2x.png',
				small_unit: this.baseImageUrl + 'uni_rental/合作加盟@2x.png',
				small_intro: this.baseImageUrl + 'uni_rental/企业介绍@2x.png',
				small_service: this.baseImageUrl + 'uni_rental/客服.png',
				small_car: this.baseImageUrl + 'uni_rental/车辆.png',
				small_bank: this.baseImageUrl + 'uni_rental/银行卡.png',
				showLogout: false,
				carSub: [],
				orderSub: [],
				drawalInfo: {},
				showBank: false
			}
		},

		computed: {
			userInfo() {
				if (!uni.$u.test.isEmpty(this.$store.state.user.userInfo)) {
					this.getDrawalInfo();
				}
				return this.$store.state.user.userInfo;
			},
			openid() {
				return this.$store.state.user.openid;
			},
			avatar() {
				
				if(uni.$u.test.isEmpty(this.userInfo.portraitImg)){
					return this.baseImageUrl+'uni_rental/用户默认头像.png'
				}else{
					return this.userInfo.portraitImg;
				}
				
				// return get(this.userInfo, 'portraitImg',
				// 	'https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto');
			},
			// nickName() {
			// 	return get(this.userInfo, 'nickName', '点击登录');
			// },
			phone() {
				
				if(uni.$u.test.isEmpty(this.userInfo.phone)){
					return '点击登录';
				}else{
					return this.userInfo.phone;
				}
				
				// return get(this.userInfo, 'phone', '点击登录');
			},

			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			}
		},
		onLoad(op) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage',]
			})

			console.log(op)
			if (op && op.scene) {
				let scene = op && op.scene.split('_');
				let memberNo = scene[0]; // memberNo
				console.log(memberNo)
				if (memberNo) {
					// 存入分享上级
					this.$store.commit('user/saveinviterId', memberNo);
				}
			}
			this.getSub();
		},
		onShow() {
			getDaiKouFlag().then(res => {
				this.showBank = res == 1
			})
		},
		
		methods: {
			async isLogin() {
				if (!this.isNotLogin) {
					return
				}
				let that = this;
				return await this.$store.dispatch('user/MmvLogin'); // 获取openid

				// if (uni.$u.test.isEmpty(this.openid)) {
				// 	console.log('没登陆，现在登录');
				// } else {
				// 	console.log('登录过了');
				// }


			},

			onShareAppMessage() {
				return {
					// title: '哈哈哈',
					// imageUrl: this.baseImageUrl + this.activityInfo.shareImage,
					path: '/pages/home/home?customerId=' + this.$store.state.user.userInfo.customerId + '&deptId='+this.$store.state.user.deptId
				}
			},
			
			getDrawalInfo() {

				uni.$u.throttle(() => {
					console.log('1111');
					memberAccount(
						this.$store.state.user.userInfo.customerId,
					).then(res => {
						this.drawalInfo = res;
					})
				}, 1000)

			},

			getSub() {
				subscribeList({
					params: {
						type: 3
					}
				}).then(res => {
					this.orderSub = res;
				})

				subscribeList({
					params: {
						type: 4
					}
				}).then(res => {
					this.carSub = res;
				})
			},

			goTestDriveList() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/testdrivelist/testdrivelist'
					})
				}
			},

			goCarOrderList() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {


					uni.requestSubscribeMessage({
						tmplIds: this.orderSub,
						success(res) {
							// if (res[tmplIds] == 'reject') {
							// 	console.log('用户取消接受此类消息通知')
							// }
							uni.navigateTo({
								url: '../../pagesB/mine/car-orderlist/car-orderlist'
							})
						},
						fail(e) {
							uni.navigateTo({
								url: '../../pagesB/mine/car-orderlist/car-orderlist'
							})
							console.log('requestSubscribeMessage', e.errMsg)
							// wx.showToast({
							// 	title: e.errMsg,
							// 	icon: 'none'
							// })
						}
					})



				}
			},

			goActivityOrder() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../activity/activity-orderList'
					})
				}
			},
			goMyCoupon() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../coupon/mine-couponList'
					})
				}

			},
			goPointsDetail() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/points/points'
					})
				}

			},

			goIntro() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/companyintro/companyintro'
					})
				}

			},

			goService() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/servicecenter/servicecenter'
					})
				}

			},

			goMycar() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {

					uni.requestSubscribeMessage({
						tmplIds: this.orderSub,
						success(res) {
							// if (res[tmplIds] == 'reject') {
							// 	console.log('用户取消接受此类消息通知')
							// }

							uni.navigateTo({
								url: '../../pagesB/mine/carownerservice/mycar/mycar'
							})
						},
						fail(e) {

							uni.navigateTo({
								url: '../../pagesB/mine/carownerservice/mycar/mycar'
							})
							console.log('requestSubscribeMessage', e.errMsg)
							// wx.showToast({
							// 	title: e.errMsg,
							// 	icon: 'none'
							// })
						}
					})


				}
			},

			goJoin() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/join/join'
					})
				}

			},

			goMyBankCard() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/mybankcard/mybankcard'
					})
				}

			},

			goMsg() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/message/message'
					})
				}

			},

			gomyincomedetail() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/myincomedetail/myincomedetail'
					})
				}

			},

			gowithdraw() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/withdraw/withdraw'
					})
				}

			},

			goInvite() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
				} else {
					uni.navigateTo({
						url: '../../pagesB/mine/inviteearnmoney/inviteearnmoney'
					})
				}

			},

			logout() {
				if (!this.isNotLogin) {
					this.showLogout = true;
				}

			},
			confirm() {
				console.log('confirm');

				// signout({
				// 	openid: this.openid
				// }).then(res => {
					this.showLogout = false
					//退出登录
					this.$store.commit('user/saveOpenid', '');
					this.$store.commit('user/saveUserInfo', {});
					uni.clearStorageSync();
					
					
					uni.$emit('logout', true);
					

					
				// })

			},
			cancel() {
				this.showLogout = false
			},
			close() {
				this.showLogout = false
			}

		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		@include flex(column);
	}

	.head-bg {
		// background: linear-gradient(#3cd4b6, #12baa4);
		height: 380upx;
		text-align: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;


		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.title {
			display: inline-block;
			color: white;
			font-size: 36upx;
			margin-top: 16upx;
			letter-spacing: 3upx;
		}

		.member-info {
			@include flex;
			margin: 69upx 63upx 0 75upx;

			.member-nick {
				@include flex(column);
				flex-grow: 1;
				justify-content: space-between;
				padding: 2upx 20upx;
				color: white;
				align-items: flex-start;

				text {
					color: $white;
					font-size: 32upx;
				}

			}

			.points {
				@include flex;
				background-color: $yellowff;
				border-radius: 90upx;
				height: 43upx;
				margin-top: 8upx;
				padding: 0 20upx;
				color: $black33;
				align-items: center;
				justify-content: center;

				// u-icon {
				// font-family: uicon-iconfont;
				// }

				text {
					font-size: 24upx;
					//字体会影响图片显示。。。
					// font-family: PingFang SC, PingFang SC-Bold;
					letter-spacing: 3upx;
				}
			}

		}
	}
	
	.bottom-content{
		@include flex(column);
		position: relative;
		top: -70upx;
	}

	.my-order {
		height: 240upx;
		margin: 0 36upx 20upx;

		text {
			display: inline-block;
			font-size: 32upx;
			margin: 28upx 0 0 40upx;
		}

		.order {
			@include flex;
			margin-top: 30upx;
			justify-content: space-around;

			.order-item {
				@include flex(column);
				justify-content: center;
				align-items: center;

				image {
					width: 72upx;
					height: 72upx;
				}

				text {
					font-size: 24upx;
					margin: 10upx 0 0;
				}
			}
		}
	}

	.test {
		margin: 0upx 36upx 0;

		.invite {
			width: 100%;
			height: 200upx;
			box-shadow: 2upx $grayef;
		}
	}

	.profit {
		height: 235upx;
		margin: 10upx 36upx 0;
		@include flex;
		align-items: center;

		.profit-item {
			@include flex(column);
			justify-content: center;

			.rect-text {
				width: 171upx;
				height: 56upx;
				text-align: center;
				line-height: 56upx;
				font-size: 26upx;
				color: $black33;
				margin-top: 10upx;
				border-radius: 90upx;
				border: solid 2upx $black66;
				position: relative;
				left: -10upx;
				// box-sizing: border-box;
			}

			.circle-text {
				width: 173upx;
				height: 58upx;
				text-align: center;
				line-height: 58upx;
				font-size: 26upx;
				color: $white;
				margin-top: 10upx;
				background-color: #FB304E;
				border-radius: 90upx;
				position: relative;
				left: -10upx;
			}
		}
	}

	.logout {
		height: 98upx;
		display: block;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: #F83C57;
		border-radius: 13upx;
		background-color: $white;
		// border: solid 2upx $green20;
		margin: 40upx 36upx 60upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 600;

	}
</style>
